<template>
  <el-dialog title="编辑培训计划" width="800px" :before-close="handleClose">
    <el-form :model="form" ref="editPlanFormRef" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item
            label="计划名称"
            prop="name"
            :rules="[
              { required: true, message: '请输入计划名称', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="form.name"
              placeholder="请输入计划名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="计划类型"
            prop="type"
            :rules="[
              { required: true, message: '请选择计划类型', trigger: 'change' },
            ]"
          >
            <el-select v-model="form.type" placeholder="请选择类型">
              <el-option label="入职培训" value="orientation"></el-option>
              <el-option label="技能培训" value="skill"></el-option>
              <el-option label="知识培训" value="knowledge"></el-option>
              <el-option label="认证培训" value="certification"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            label="开始日期"
            prop="startDate"
            :rules="[
              { required: true, message: '请选择开始日期', trigger: 'change' },
            ]"
          >
            <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="结束日期"
            prop="endDate"
            :rules="[
              { required: true, message: '请选择结束日期', trigger: 'change' },
            ]"
          >
            <el-date-picker
              v-model="form.endDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="计划描述" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :rows="3"
          placeholder="请输入计划描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="使用模板" prop="template">
        <el-radio-group v-model="form.template">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card shadow="hover" class="template-card">
                <div class="card-content">
                  <h6>新入职护士培训模板</h6>
                  <p class="text-muted">适用于新入职护士的标准培训流程</p>
                  <el-radio label="template1">选择此模板</el-radio>
                </div>
                <el-tag type="info" class="template-badge">入职培训</el-tag>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" class="template-card">
                <div class="card-content">
                  <h6>静脉输液技能培训模板</h6>
                  <p class="text-muted">包含静脉输液相关的理论和实操培训</p>
                  <el-radio label="template2">选择此模板</el-radio>
                </div>
                <el-tag type="primary" class="template-badge">技能培训</el-tag>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" class="template-card">
                <div class="card-content">
                  <h6>不使用模板</h6>
                  <p class="text-muted">从头开始创建自定义培训计划</p>
                  <el-radio label="template-none">不使用模板</el-radio>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关联课程" prop="courses">
        <el-select
          v-model="form.courses"
          multiple
          placeholder="请选择关联课程"
          style="width: 100%"
        >
          <el-option label="静脉输液技术规范" value="1"></el-option>
          <el-option label="基础生命支持(BLS)" value="2"></el-option>
          <el-option label="护理文档规范与书写" value="3"></el-option>
          <el-option label="急救护理实操要点" value="4"></el-option>
          <el-option label="伤口护理与换药技术" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联考核" prop="assessments">
        <el-select
          v-model="form.assessments"
          multiple
          placeholder="请选择关联考核"
          style="width: 100%"
        >
          <el-option label="静脉输液技术规范考核" value="1"></el-option>
          <el-option label="护理文档规范考核" value="2"></el-option>
          <el-option label="急救技能评估" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参与人员" prop="participants">
        <el-select
          v-model="form.participants"
          multiple
          placeholder="可按部门或角色选择"
          style="width: 100%"
        >
          <el-option label="内科护理组" value="dept1"></el-option>
          <el-option label="外科护理组" value="dept2"></el-option>
          <el-option label="急诊护理组" value="dept3"></el-option>
          <el-option label="ICU护理组" value="dept4"></el-option>
          <el-option label="新入职护士" value="role1"></el-option>
          <el-option label="护士长" value="role2"></el-option>
          <el-option label="主管护师" value="role3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveChanges">保存修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { modalControllers } from "@/stores/modalController.js";

const modalController = modalControllers();
import { ref, reactive } from "vue";

const dialogVisible = ref(false);
const editPlanFormRef = ref(null);

const form = reactive({
  id: null,
  name: "",
  type: "",
  startDate: "",
  endDate: "",
  description: "",
  template: "template-none",
  courses: [],
  assessments: [],
  participants: [],
});

const open = (planData) => {
  if (planData) {
    Object.assign(form, planData);
  }
  dialogVisible.value = true;
};

const handleClose = () => {
  editPlanFormRef.value.resetFields();
  dialogVisible.value = false;
};

const saveChanges = () => {
  editPlanFormRef.value.validate((valid) => {
    if (valid) {
      console.log("保存修改:", form);
      // Implement save changes logic here
      handleClose();
    } else {
      console.log("表单验证失败");
      return false;
    }
  });
};

defineExpose({
  open,
});
</script>

<style scoped>
.template-card {
  position: relative;
  margin-bottom: 10px;
}

.template-card .card-content {
  padding-bottom: 20px; /* Adjust as needed to make space for radio */
}

.template-card .el-radio {
  position: absolute;
  bottom: 10px;
  left: 15px;
}

.template-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>
